<template>
  <div class="space-y-6">
    <!-- 帖子标题 -->
    <div class="space-y-2">
      <label class="text-base font-semibold text-gray-900">
        帖子标题 <span class="text-red-500">*</span>
      </label>
      <input 
        v-model="form.title"
        type="text" 
        class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg text-base transition-colors duration-300 focus:outline-none focus:border-indigo-500"
        placeholder="请输入帖子标题..."
        maxlength="255"
        required
      >
      <div class="text-sm text-gray-500">
        {{ form.title.length }}/255 字符
      </div>
    </div>

    <!-- 编辑器类型选择 -->
    <div class="space-y-2">
      <label class="text-base font-semibold text-gray-900">编辑器类型</label>
      <div class="flex gap-5 mt-2">
        <label class="flex items-center cursor-pointer">
          <input 
            v-model="editorType" 
            type="radio" 
            value="rich"
            class="w-4 h-4 mr-2"
          >
          <span class="flex items-center gap-2 font-medium text-gray-900">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            富文本编辑器
          </span>
        </label>
        <label class="flex items-center cursor-pointer">
          <input 
            v-model="editorType" 
            type="radio" 
            value="markdown"
            class="w-4 h-4 mr-2"
          >
          <span class="flex items-center gap-2 font-medium text-gray-900">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
            </svg>
            Markdown编辑器
          </span>
        </label>
      </div>
    </div>

    <!-- 帖子内容 -->
    <div class="space-y-2">
      <label class="text-base font-semibold text-gray-900">
        帖子内容 <span class="text-red-500">*</span>
      </label>
      
      <!-- 富文本编辑器 -->
      <div v-if="editorType === 'rich'" class="border-2 border-gray-200 rounded-lg overflow-hidden transition-colors duration-300 focus-within:border-indigo-500">
        <RichTextEditor
          v-model="form.content"
          :height="400"
          placeholder="请输入帖子内容..."
        />
      </div>
      
      <!-- Markdown编辑器 -->
      <div v-else class="border-2 border-gray-200 rounded-lg overflow-hidden transition-colors duration-300 focus-within:border-indigo-500">
        <div class="flex items-center gap-1 p-3 bg-gray-50 border-b border-gray-200">
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('**', '**')"
            title="粗体"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"/>
            </svg>
          </button>
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('*', '*')"
            title="斜体"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4h4M8 20h4M12 4v16"/>
            </svg>
          </button>
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('`', '`')"
            title="代码"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
            </svg>
          </button>
          
          <div class="w-px h-6 bg-gray-200 mx-2" />
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('## ', '')"
            title="标题"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
            </svg>
          </button>
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('* ', '')"
            title="列表"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
            </svg>
          </button>
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('> ', '')"
            title="引用"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
            </svg>
          </button>
          
          <button 
            type="button" 
            class="flex items-center justify-center w-9 h-9 border border-gray-200 bg-white rounded-md hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
            @click="insertMarkdown('[链接文字](', ')')"
            title="链接"
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
            </svg>
          </button>
        </div>
        
        <textarea 
          ref="markdownEditor"
          v-model="form.content"
          class="w-full p-4 border-0 text-base leading-relaxed resize-y min-h-[300px] font-mono focus:outline-none"
          placeholder="请输入帖子内容...支持Markdown格式"
          rows="15"
          required
        />
      </div>
      
      <div class="text-sm text-gray-500">
        <span v-if="editorType === 'rich'">使用富文本编辑器，所见即所得</span>
        <span v-else>支持Markdown格式，你可以使用工具栏按钮或直接输入Markdown语法</span>
      </div>
    </div>

    <!-- 预览区域 -->
    <div v-if="showPreview" class="border-2 border-gray-200 rounded-lg overflow-hidden">
      <div class="flex justify-between items-center p-4 bg-gray-50 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">内容预览</h3>
        <button 
          type="button" 
          class="px-3 py-1 border border-gray-200 bg-white rounded-md text-sm hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
          @click="showPreview = false"
        >
          隐藏预览
        </button>
      </div>
      <div class="p-5 leading-relaxed text-gray-900 prose prose-sm max-w-none" v-html="renderedContent"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CreatePostRequest } from '~/types/post'

interface Props {
  modelValue: CreatePostRequest
  showPreview?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: CreatePostRequest): void
  (e: 'update:showPreview', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  showPreview: false
})

const emit = defineEmits<Emits>()

const form = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const showPreview = computed({
  get: () => props.showPreview,
  set: (value) => emit('update:showPreview', value)
})

const editorType = ref<'rich' | 'markdown'>('rich')
const markdownEditor = ref<HTMLTextAreaElement>()

const renderedContent = computed(() => {
  if (editorType.value === 'rich') {
    return form.value.content
  } else {
    let content = form.value.content
    
    // 标题
    content = content.replace(/^### (.*$)/gim, '<h3>$1</h3>')
    content = content.replace(/^## (.*$)/gim, '<h2>$1</h2>')
    content = content.replace(/^# (.*$)/gim, '<h1>$1</h1>')
    
    // 粗体和斜体
    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    content = content.replace(/\*(.*?)\*/g, '<em>$1</em>')
    
    // 代码
    content = content.replace(/`(.*?)`/g, '<code>$1</code>')
    
    // 引用
    content = content.replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
    
    // 列表
    content = content.replace(/^\* (.*$)/gim, '<li>$1</li>')
    content = content.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
    
    // 链接
    content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
    
    // 换行
    content = content.replace(/\n/g, '<br>')
    
    return content
  }
})

const insertMarkdown = (before: string, after: string) => {
  if (!markdownEditor.value) return
  
  const textarea = markdownEditor.value
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = form.value.content.substring(start, end)
  
  const newText = before + selectedText + after
  const newContent = form.value.content.substring(0, start) + newText + form.value.content.substring(end)
  
  form.value.content = newContent
  
  nextTick(() => {
    textarea.focus()
    textarea.setSelectionRange(start + before.length, start + before.length + selectedText.length)
  })
}

const togglePreview = () => {
  showPreview.value = !showPreview.value
}

defineExpose({
  togglePreview
})
</script>
